<template>
  <div class="mainbody">
    <bpm-c-subnavbar @navClicked="navClicked"
                     :showLeft="false"
                     :rightShowArray="['save','close']"/>
    <div>
      <bpm-c-form>
      <bpm-c-block :ptitle="blockTitleInfo[0]"
                   pinputtype="text"
                   v-model="input1" />
      <bpm-c-blockbutton :ptitle="otherI18n.query"
                         pcontent=""
                         @buttonClick="queryClicked" />
      </bpm-c-form>
      <bpm-c-form>
      <bpm-c-block :ptitle="blockTitleInfo[1]"
                    :pline="1"
                    pinputtype="text"
                   v-model="input2" />
      </bpm-c-form>
    </div>
    <bpm-d-grid
      :needBar="false"
      :showCheckbox="false"
      :height="360"
      @gridClicked="gridClicked"
      @gridDBLClicked="selectedClicked"
      :gridInfo="gridInfo"
      :gridTitleInfo="gridTitleInfo"
      :gridShowInfo="gridShowInfo"
      :gridTypeInfo="gridTypeInfo"
      :gridWidthInfo="gridWidthInfo"/>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'bpmDCommonchoose',
  props: {
    title: '',
    pselectType: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      input1: '',
      input2: '',
      chooseIndex: -1
    }
  },
  methods: {
    ...mapActions(['queryCostCenter', 'queryInternalOrder', 'queryBudgetSubject', 'initChooseList']),
    clearList () {
      if (this.pselectType === this.chooseDialogEnum.reimbursecompanycostcenter ||
        this.pselectType === this.chooseDialogEnum.postcostcenter ||
        this.pselectType === this.chooseDialogEnum.splitcostcenter) {
        this.chooseIndex = -1
        this.initChooseList({name: 'costCenterList'})
      }
    },
    navClicked (atype) {
      if (atype === 'close') {
        this.$emit('closeClicked')
      } else if (atype === 'save') {
        if (this.chooseIndex >= 0) {
          this.$emit('selectClicked', this.gridInfo[this.chooseIndex])
        } else {
          this.alert(this.otherI18n.mustChooseOne)
        }
      }
    },
    queryClicked () {
      console.log(this.input1, this.input2)
      if (this.pselectType === this.chooseDialogEnum.reimbursecompanycostcenter ||
        this.pselectType === this.chooseDialogEnum.postcostcenter ||
        this.pselectType === this.chooseDialogEnum.splitcostcenter) {
        let param = {}
        param.me = this
        param.costCenterCode = this.input2
        param.costCenterName = this.input1
        param.companyCode = this.ssc.reimburse.whBtReimburse.reimbursecompanycode
        this.queryCostCenter(param)
      }
    },
    gridClicked (aindex) {
      this.chooseIndex = aindex
    },
    selectedClicked (aindex) {
      console.log('choose', aindex)
      this.$emit('selectClicked', this.gridInfo[aindex])
    }
  },
  computed: {
    ...mapState(['ssc', 'chooseDialogEnum', 'otherI18n', 'lang']),
    gridInfo () {
      if (this.pselectType === this.chooseDialogEnum.reimbursecompanycostcenter ||
        this.pselectType === this.chooseDialogEnum.postcostcenter ||
        this.pselectType === this.chooseDialogEnum.splitcostcenter) {
        return this.ssc.reimburse.costCenterList
      }
    },
    gridShowInfo () {
      if (this.pselectType === this.chooseDialogEnum.reimbursecompanycostcenter ||
        this.pselectType === this.chooseDialogEnum.postcostcenter ||
        this.pselectType === this.chooseDialogEnum.splitcostcenter) {
        return ['costCenterCode', 'costCenterName']
      }
    },
    blockTitleInfo () {
      if (this.pselectType === this.chooseDialogEnum.reimbursecompanycostcenter ||
        this.pselectType === this.chooseDialogEnum.postcostcenter ||
        this.pselectType === this.chooseDialogEnum.splitcostcenter) {
        return [this.getLanguage('label.whBtReimburse.reimbursecompanycostcenter'),
          this.getLanguage('label.whBtReimburse.reimbursecostcentercode')]
      }
    },
    gridTitleInfo () {
      // this.getResource('label.whBtReimburseDdSub.subjectcode')
      if (this.pselectType === this.chooseDialogEnum.reimbursecompanycostcenter ||
        this.pselectType === this.chooseDialogEnum.postcostcenter ||
        this.pselectType === this.chooseDialogEnum.splitcostcenter) {
        return [this.getLanguage('label.whBtReimburse.reimbursecostcentercode'),
          this.getLanguage('label.whBtReimburse.reimbursecompanycostcenter')]
      }
    },
    gridTypeInfo () {
      return ['text', 'text']
    },
    gridWidthInfo () {
      return [490, 490]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mainbody {
    width: 980px;
    min-height: 300px;
  }
</style>
